<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 数组的循环 -->
    <div id="list-rendering">
        <li v-for="(item,index) in listArray" :key="item">
            {{index}} --> {{item}}
        </li>
        ========<!-- 对象的循环 -->=========
        <li v-for="(value,key,index) in listObject">
            {{index}} --> {{key}}--> {{value}}
        </li>
        <div @click="clickBtn">按钮</div>

        ========<!-- 数值的循环 -->=========
        <li v-for="(value,index) in 5">
            {{index}} --> {{value}}
        </li>
        ========<!-- 对象的循环 -->=========
        <template v-for="(value,key,index) in listObject">
            <li v-if="key !== 'author'">
                {{index}} --> {{key}}--> {{value}}
            </li>
        </template>
        <div @click="clickBtn">按钮</div>

    </div>

</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const ListRendering = {
        data() {
            return {
                listArray: [
                    {text: 'Learn HTML'},
                    {text: 'Learn CSS'},
                    {text: 'Learn JavaScript'},
                    {text: 'Learn Vue.js'}
                ],
                listObject: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                }
            }
        },
        methods: {
            clickBtn(){
                /** 1、使用数组的变更函数push、pop、shift、unshift、splice、sort、reverse */
                //this.listArray.push({text: 'Learn Vue.js'});
                //this.listArray.pop();
                //this.listArray.shift();
                //this.listArray.unshift({text: 'Learn Vue.js'});
                //this.listArray.splice(0,3);//移除，根据下标，删除数量进行操作
                //this.listArray = ['HTML','CSS','VUE.JS']
                //t//this.listArray.splice(0,3);//移除，根据下标，删除数量进行操作
                //this.listArray = ['HTML','CSS','VUE.JS']
                //this.listArray.filter();

                this.listArray[2] = 'CSS'
            }
        },
    }
    Vue.createApp(ListRendering).mount("#list-rendering")
</script>
</html>